// useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。
/*
 useEffect运行在画面渲染之后   
开始
函数操作
获取DOM
画面渲染
UseEffetct 

useInsertionEffect运行在获取Dom之前
开始
函数操作
useInsertionEffect
获取DOM
画面渲染


useLayoutEffect 运行在获取Dom之后

开始
函数操作
获取DOM
useLayoutEffect
画面渲染
*/

// 副作用操作包括数据获取、订阅、手动更改 DOM 等等。

import { useEffect, useState } from "react";

// useEffect 的常见用法包括：

// 数据获取：在组件挂载时获取数据。
// 订阅：添加事件监听器或订阅某些服务。
// 清理操作：1.在组件卸载时清理资源（如移除事件监听器）。2. 组件更新 如useState的set函数

// useEffect的依赖项
// 1. 依赖特定状态或 props：当依赖数组包含特定状态或 props 时，useEffect 只会在这些依赖项改变时重新执行。
// 2.当依赖数组为空时，useEffect 的行为类似于类组件的 componentDidMount，只会在组件首次渲染后执行一次，而不会在之后的更新中再次执行。
//3. 无依赖数组：如果不提供依赖数组，useEffect 将在每次组件渲染后执行，这包括首次挂载和每次更新。

const url = "https://geek.itheima.net/v1_0/channels";
function useEffectDemo() {
  let [list, setList] = useState([]);

  useEffect(() => {
    function getList() {
      fetch(url)
        .then((res) => res.json())
        .then((res) => {
          // console.log(res);
          setList((prevList) => [
            ...prevList,
            ...res.data.channels.slice(2, 8),
          ]);
        });
    }
    // let timer=setInterval(() => {
    //   console.log(new Date().toLocaleString());
    // }, 1000);
    getList();
    return () => {
      // 清楚副作用 例如定时器
      //   clearInterval(timer);
    };
  }, []);
  return (
    <div className="list">
      <h2>useEffect的使用</h2>
      {list.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

export default useEffectDemo;
